<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        /**解决浏览器兼容性问题**/
        *{margin: 0;padding: 0;}
        html,body{width: 100%;height: 100%;}/**/
        body{background: url(img/bg03.jpg) no-repeat center;}
        h1{color: #fff;text-align: center;line-height: 80px;}
        .media{width: 534px;height: 400px;margin: 40px auto 0;
        }
        #register{width: 200px;height:50px;background-color: #2196f3; margin: 60px auto 0;
            text-align: center;line-height: 50px;color: #fff;border-radius: 10px;}
        #canvas{display: none;}
        #shuru{width: 200px;height:50px;background-color: #2196f3; margin: 20px auto 0;}
    </style>
</head>
<body>
<h1>百度云人脸注册</h1>
<div id="shuru">
    用户名：
    <input type="text" name="username" id="username"/>
</div>

<div class="media">
    <video id="video" width="450" height="300" src="" autoplay></video>
    <canvas id="canvas" width="450" height="300"></canvas>

</div>
<button id="register" >点击开始登陆</button>
<script  src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    /**调用摄像头，获取媒体视频流**/
    var video = document.getElementById('video');
    //返回画布二维画图环境
    var userContext = canvas.getContext("2d");
    var getUserMedia =
        //浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
        (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
    //getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
    getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){
        //获取摄像头捕捉的视频流
        video.srcObject=localMediaStream;
    },function(e){
        console.log("获取摄像头失败！！")
    });
    //点击按钮注册事件
    var btn = document.getElementById("register");

    btn.onclick = function () {
        if(username != null){
            //点击按钮时拿到登陆者面部信息
            userContext.drawImage(video,0,0,450,300);
            var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
            //拿到bash64格式的照片信息
            var faceBase = userImgSrc.split(",")[1];
            //ajax异步请求
            $.ajax({
                url: "/face/face-login",
                dataType:"json",   //返回格式为json
                type: "post",
                data: {"imagebast64": userImgSrc
                },
                success: function(result){
                    if(result){
                        alert("登陆成功！！，点击确认跳转至登录页面");
                        window.location.href="/face/success";
                    }else if(result === '2'){
                        alert("您已经注册过啦！！");
                    }else{
                        alert("系统错误，先进行注册再登陆！！");
                    }

                }
            })
        }else{
            alert("用户名不能为空");
        }

    }
</script>
</body>
</html>